<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    
    
        <title>CSS3 Image Gallery</title>
        <style type="text/css">    
            body {
            	background-color:#cccccc;
                background-image:url('<%=request.getContextPath()%>/images/topLeft.jpg');
                text-align: center;
                opacity:0.9;
                filter:alpha(opacity=90);
            }
            
            
            h1 {
                color: #FBF6FD;
                font-size: 60px;
                text-shadow: #272229 2px 2px 4px;
            }
            

            #gallery {
                border: 10px solid #1D0C16;
                height: 300px;
                width: 800px;
                margin-left: auto;
                margin-right: auto;
                overflow: visible;
                background: #272229;
                /* box shadow effect in Safari and Chrome*/
                -webkit-box-shadow: #272229 10px 10px 20px;
                /* box shadow effect in Firefox*/
                -moz-box-shadow: #272229 10px 10px 20px;
                /* box shadow effect in IE*/
                filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);     
                /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
                 box-shadow: #272229 10px 10px 20px;
            
            }
          
		  
            #gallery ul{
               /* This position the ul content in the middle of the gallery*/
               margin-left:-30px; 
            }
       
       
            #gallery ul li {
                /* In order to create the proper effect with hover we should use display inline-table
                    This will display the big picture right next to its thumbnail
                */
                list-style:none; display:inline-table; padding:10px;
            }
                 
                 
            /* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
            #gallery ul li .pic{
                /* Animation with transition in Safari and Chrome */
               -webkit-transition: all 0.6s ease-in-out;
               /* Animation with transition in Firefox (No supported Yet) */
               -moz-transition: all 0.6s ease-in-out;
               /* Animation with transition in Opera (No supported Yet)*/
               -o-transition: all 0.6s ease-in-out;
                /* The the opacity to 0 to create the fadeOut effect*/
               opacity:0;
               visibility:hidden; 
               position:absolute; 
               margin-top:10px; 
               margin-left:-20px; 
               border:1px solid black;
               /* box shadow effect in Safari and Chrome*/
               -webkit-box-shadow:#272229 2px 2px 10px;
                /* box shadow effect in Firefox*/
               -moz-box-shadow:#272229 2px 2px 10px;
               /* box shadow effect in IE*/
               filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
                 /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
               box-shadow:#272229 2px 2px 10px;
            }
            

            #gallery ul li .mini:hover{
                cursor:pointer;
            }
            
            
            /* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
           #gallery ul li:hover .pic {
                /* width and height is how much the picture is going to growth with the effect */
                width:400px; 
                height:400px;
                opacity:1; 
                visibility:visible; 
                float:right;
            }
                
        </style>
        <script>
function goBack()
  {
  window.history.back()
  }
</script>
    </head>
    <body>
    <div align="left">
    	<a href="javascript:goBack();"><img src="<%=request.getContextPath()%>/images/voltar.png"/></a>
    </div>
            <h1>Jardim</h1>
        <div id="gallery">
            <ul>
            <%for(int i = 0; i <= 44; i++){ %>
            	<li>
                    <img src="<%=request.getContextPath()%>/images/garden/<%=i %>.jpg" class="mini" width="50" height="50" />
                    <img src="<%=request.getContextPath()%>/images/garden/<%=i %>.jpg" class="pic"  />
                </li>
			<%} %>
            </ul>
        </div>
    </body>
</html>